<template>
	<view class="container user-container">
		<view class="user-main">
			<view class="user-top">
				<template v-if="!isLogin">
					<image class="user-header" src="/static/head.png" mode="aspectFill"></image>
					<view class="top-action" @click="clickLogin">点击登录</view>
				</template>
				<template v-else="isLogin">
					<image class="user-header" :src="userInfo.headimgUrl || '/static/head.png'" mode="aspectFill"></image>
					<view class="top-action" @click="jump('/pages/user/setting')">{{userInfo.nickName|| '暂未设置'}}</view>
					<view class="iconfont" @click="jump('/pages/user/setting')">&#xe643;</view>
				</template>
			</view>
			<view class="user-panel">
				<view class="user-list" v-for="item in list1" :key="item.title" @click="jump(item.url)">
					<view class="user-list-ico iconfont" :style="'color:'+item.icoC">{{item.ico}}</view>
					<view class="user-list-title">{{item.title}}</view>
					<view class="user-list-more iconfont">&#xe613;</view>
				</view>
			</view>
			<view class="user-panel">
				<view class="user-list" v-for="item in list2" :key="item.title" @click="jump(item.url)">
					<view class="user-list-ico iconfont" :style="'color:'+item.icoC">{{item.ico}}</view>
					<view class="user-list-title">{{item.title}}</view>
					<view class="user-list-more iconfont">&#xe613;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getStorage, utilLogin } from '@/common/util';
	import commonStore from '@/store/commonStore';
	import { onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
	const list1 = ref([
		{ title: '我的订单', icoC:'#3AD3C1', ico: '\ue65e', url: '/pages/user/order' },
		{ title: '优惠券', icoC:'#FF8F21', ico: '\ue618', url: '/pages/user/myCoupon' },
		{ title: '地址管理', icoC:'#F35609', ico: '\ue69e', url: '/pages/user/address' }
	])
	const list2 = ref([
		// { title: '联系客服', icoC:'#43EE1A', ico: '\ue644', url: '/pages/user/service' },
		{ title: '意见反馈', icoC:'#F831DF', ico: '\ue604', url: '/pages/user/feedback' }
	])

	const userInfo = ref<any>({})
	const isLogin = ref(true)
	onMounted(async () => {
		await getUserInfo()
	})
	onShow(async () => {
		if (commonStore.state.reload.indexOf('userIndex') >= 0) {
			getUserInfo()
			commonStore.commit('delReload', 'userIndex')
		}
	})
	const getUserInfo = async () => {
		userInfo.value = getStorage('userAuth') || {}
		if (userInfo.value.token) {
			isLogin.value = true
		} else {
			isLogin.value = false
		}
	}
	const jump = (url : string) => {
		if (!utilLogin()) return
		uni.navigateTo({ url: url })
	}
	const clickLogin = () => {
		uni.navigateTo({ url: '/pages/login/index' })
	
	}
</script>

<style lang="scss">
	.user-container {
		height: 100%;
		position: relative;
		padding: 20rpx;
		background-color: #F5F6FA;

		.user-main {}

		.user-top {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 280rpx;
			background: linear-gradient(90deg, #C8F3EE 0%, #82E3D8 100%);
			border-radius: 10rpx;
			margin-bottom: 40rpx;
			.iconfont {
				font-size: 42rpx;
			}
		}

		.user-header {
			border: solid 1px #eee;
			width: 150rpx;
			height: 150rpx;
			border-radius: 150rpx;
			flex-shrink: 0;
		}

		.top-action {
			font-size: 37rpx;
			font-weight: bold;
			flex-grow: 1;
			margin-left: 20rpx;
		}

		.user-panel {
			background-color: #fff;
			box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			padding: 0 15rpx;
			margin-bottom: 20rpx;
		}

		.user-list {
			display: flex;
			align-items: center;
			padding: 30rpx 15rpx;
			border-bottom: solid 1px #E3E3E3;

			.user-list-more {
				transform: rotateZ(-90deg);
				color: #868686;
			}
		}

		.user-list:last-child {
			border-bottom: unset;
		}

		.user-list-ico {
			font-size: 40rpx;
		}

		.user-list-title {
			flex-grow: 1;
			margin-left: 30rpx;
			font-size: 26rpx;
		}
	}
</style>